<template>
  <div class="extension-history">

    <div v-if="!data || data.length <= 0" class="no-history">
      <img src="~@/assets/imgs/extension/no-history.png" class="img" />
      <br>
      <p>You have no record of extension</p>
    </div>

    <div v-if="data && data.length > 0" class="list">
      <div v-for="item in data" @click="goDetails(item)" class="sort">
        <div class="amount">{{ item.extensionFee | formatCurrency(',') }}</div>
        <div class="right">
          <p class="status">{{ $t('paid') }}</p>
          <p>{{ $t('extensionDate') }} : {{ item.fromDate | formatDate('MM-dd-yyyy') }}～{{ item.toDate | formatDate('MM-dd-yyyy') }}</p>
        </div>
      </div>
    </div>

    <div class="customer">
      <p>if any question please contact customer service </p>
      <p><span class="phone">{{ customer.tel }}</span></p>
      <p class="time">({{ customer.time }},Monday - Saturday)</p>
    </div>

  </div>
</template>

<script>
export default {
  name: 'extension-history',
  data() {
    return {
      orderId: '',
      data: [],
      customer: {
        tel: '',
        time: '',
      },
    };
  },
  methods: {
    /**
     * 获取历史列表
     */
    getList() {
      const params = {
        orderId: this.orderId,
      };
      this.$api.queryExtentionHistoryInfo(params).then(res => {
        const { status, error, data } = res;
        if ('1' === status && ('00000000' === error || '0000' === error) && data) {
          this.data = data;
          // this.data = [];
        }
      });
    },
    /**
     * 获取客服电话
     */
    getCustomerPhone() {
      this.$api.getServiceTel({}).then(res => {
        const { status, error, data } = res;
        if ('1' === status && ('00000000' === error || '0000' === error)) {
          this.customer = data[0];
        }
      });
    },
    /**
     * 跳转展期详情
     */
    goDetails(item) {
      this.$router.push({
        path: '/extension/details',
        query: {
          extensionDay: item.extensionDay,
          extensionFee: item.extensionFee,
          fromDate: item.fromDate,
          toDate: item.toDate,
          extensionPayNumber: item.extensionPayNumber,
          overdueFlag: item.overdueFlag,
        },
      });
    },
  },
  created() {
    const query = this.$route.query;
    this.orderId = query.orderId;
    this.getList();
    this.getCustomerPhone();
  },
};
</script>

<style lang="scss">
@import "~@/assets/scss/function";

[data-page=extension-history] {
  body {
    background: #f8f8f8;

    .extension-history {
      padding: 30px 0 168px 0;

      .no-history {
        font-size: 30px;
        font-weight: bold;
        color: #333333;
        line-height: 36px;
        text-align: center;
        padding: 350px 0 0 0;

        .img {
          display: block;
          width: 350px;
          height: 350px;
          margin: 0 auto;
        }
      }

      .list {
        padding: 0 30px;

        .sort {
          height: 160px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #FFF;
          border-radius: 16px;
          margin: 0 0 30px 0;
          padding: 0 30px;

          .amount {
            font-size: 44px;
            font-weight: bold;
            color: #333333;
          }

          .right {
            height: 100%;
            font-size: 24px;
            color: #AAAAAA;
            text-align: right;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;

            .status {
              color: #222222;
              font-size: 32px;
              font-weight: bold;
              margin: 0 0 16px 0;
            }
          }
        }

        .sort:last-child {
          margin: 0px;
        }
      }

      .customer {
        width: 100%;
        color: #333333;
        line-height: 28px;
        font-size: 24px;
        text-align: center;
        padding: 32px 30px;
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 2;
        background: #f8f8f8;

        .phone {
          color: $btnBg;
          font-weight: bold;
        }

        .time {
          color: #999999;
          margin: 8px 0 0 0;
        }
      }
    }
  }
}
</style>
